
<template>
    <div class="wrap">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide 5s" id="fives" v-for="(item, index) in pageList" :key="index">
                    <div class="pannal">
                        <div class="base">
                            <img class="clip" src="../../../assets/img/clip.png" alt="">
                            <div class="num">
                                <span>Q{{index + 1}}</span>/10
                            </div>
                            <h3>{{item.problem}}</h3>
                            <ul>
                                <li :class="{ active: item.curIdx == idx}" v-for="(it, idx) in item.select" :key="idx" @click="selectHandler(it, idx)">
                                    <span>{{it.value}}、</span>{{it.label}}
                                    <img v-if="item.isRight" src="../../../assets/img/right.png" alt="">
                                    <img v-else src="../../../assets/img/wrong.png" alt="">
                                </li>
                            </ul>
                            <div class="next" @click="nextQuestion">
                                <img src="../../../assets/img/next.png" alt="">
                            </div>
                            <div class="tipss" v-if="item.isSelected">
                                <h4>解析：{{item.result}}</h4>
                                <p>{{item.tips}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slider">
                    <div class="pannal">
                        <img class="clip" src="../../../assets/img/clip.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export { default } from "./index.js";
</script>

<style lang="less" scoped>
@import "./../../../../node_modules/swiper/dist/css/swiper.css";
@import "./index.less";
</style>

<style lang="less">
@media (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  .wrap {
    .swiper-slide {
      .pannal {
        .base {
          .num {
            padding-top: 0.1rem;
            font-size: 0.14rem;
            span {
              font-size: 0.3rem;
            }
          }
          h3 {
            margin-top: 0.05rem;
          }
          ul {
            margin-top: 0.05rem;
            li {
              padding: 0.12rem;
            }
          }
          .next img {
            width: 0.9rem;
          }
        }
      }
    }
  }
}
</style>

